<!-- 失物招领 -->
<template>
  <div class="lostFound">
    <el-upload
      ref="upload"
      class="upload-demo"
      drag
      list-type="picture"
      action="#"
      :on-change="beforeAvatarUpload"
      @abort="cancel"
      :auto-upload="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      <div class="el-upload__tip" slot="tip">必须要上传一张图片才能提交哟</div>
    </el-upload>

    <van-form class="lostInfo">
      <van-cell-group inset>
        <van-field v-model="lostFound.title" name="title" label="物品名称" placeholder="请输入物品名称" />

        <van-field
          v-model="lostFound.content"
          name="content"
          label="描述"
          placeholder="请描述物品细节和具体地点"
          rows="2"
          autosize
          type="textarea"
          maxlength="100"
          show-word-limit
        />
      </van-cell-group>

      <van-button
        plain
        hairline
        style="margin:0.5rem 0;width:40%;"
        @click="upload"
        size="large"
        type="primary"
      >提交</van-button>
    </van-form>
  </div>
</template>

<script>
import { Notify } from 'vant'

export default {
  props: {
    editId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    editId: function () {
      this.init()
    },
  },
  created() {
    this.init()
  },
  data() {
    return {
      lostFound: {
        title: '',
        content: '',
        id: this.editId.toString(),
      },
      flag: false,
      fileList: [],
    }
  },
  methods: {
    async init() {
      const res = await this.$axios.get('/item/find/info/' + this.editId)
      if (res.data.code == 200) {
        this.lostFound.title = res.data.data.title
        this.lostFound.content = res.data.data.content
      }
    },
    // 上传文件前预校验
    beforeAvatarUpload(file) {
      const FileExt = file.name.replace(/.+\./, '')
      const isJPG = !(['jpg', 'png'].indexOf(FileExt.toLowerCase()) === -1)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        Notify({
          type: 'danger',
          message: '上传头像图片只能是 JPG / png 格式!',
        })
      } else if (!isLt2M) {
        Notify({ type: 'danger', message: '上传头像图片大小不能超过 5M!' })
      } else {
        this.flag = true
      }
      return isJPG && isLt2M
    },
    // 	取消上传
    cancel() {
      this.flag = false
    },
    upload() {
      this.fileList = this.$refs.upload.uploadFiles
      let formData = new FormData()
      for (
        let index = 0;
        index < this.$refs.upload.uploadFiles.length;
        index++
      ) {
        formData.append('imgFiles', this.$refs.upload.uploadFiles[index].raw)
      }
      formData.append(
        'itemFind',
        new Blob([JSON.stringify(this.lostFound)], {
          type: 'application/json',
        })
      )

      this.$axios
        .post('/item/find/update', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then((res) => {
          if (res.data.code == 200) {
            Notify({ type: 'success', message: '提交成功！' })
            this.$emit('submitSucess')
          }
        })
        .catch(() => {})
    },
  },
}
</script>
 
 <style   scoped>
.lostFound {
  margin-top: 46px;
}
.lostInfo {
  width: 90vw;
  margin-left: 5vw;
}
</style>